<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/forget.css">

</head>

<body>
	<table>
        <tr >
            <td class="div1">
               
		<div class="container-fluid">
		<div class="row justify-content-end">
			<div class="col-lg-4 position-fixed border-right leftCon">
				<!-- 导航栏 -->
				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
					<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
					<ul class="nav mr-auto">
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">门店</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
						</li>
					</ul>
					<span class="iconfont icon-menu" id="showBtn"></span>
				</header>


				<!-- 点击菜单后要展示的内容 -->
				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
						<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
						<span class="iconfont icon-guanbi" id="closeBtn"></span>
					</header>
					<div class="list">
						<ul class="list-unstyled mx-sm-5 pl-sm-5">
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
							<hr>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
							<hr>
						</ul>	
					</div>
				</div>

			</div>
		</div>
	</div>

	<div class="div6">
                    <div>
                        <div class="span2">
                            <a href="login.html" style="color: #707070;"><img src="images/zuojiantou.png" width="16px" height="16px">&nbsp;登录</a>
                        </div>
                        <div class="span1">
                            <span>忘记密码</span>
                        </div>
                    </div>
                  </div>

            </td>
            <td class="div3">

            </td>
            <td>
			 <div class="div2">、
			    <div class="div7">
					<div class="span3">
						<span >请您输入您的注册邮箱或已认证的手机号码。</span>
						
					</div>
					<hr>
					<div class="div8"><input class="ok" type="text" id="username" name="username" placeholder="注册邮箱或认证的手机号" value="" autocomplete="new-password"></div>
					<div class="div9">
						<button class="button1">提交</button>
					</div>
              </div>	
			</div>
             
            </td>
        </tr>
  </table>
	</div>
	
    
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>
<script>
	$('#showBtn').on('click',function(){
		$('.menu').removeClass('hide').addClass('show');
		shadowMenu();
	});
	$('#closeBtn').on('click',function(){
		$('.menu').removeClass('show').addClass('hide');
		shadowMenu();
	});


</script>


</body>